<script setup>
import * as api from '@/api/sys/role.js';
import {getRoleMenuList,getList,changeRoelMenu} from "@/api/menu.js";
import { ElMessage, ElMessageBox } from 'element-plus';
import {reactive, ref, toRefs} from 'vue';
import EditDialog from './components/EditDialog.vue';
import ComponentsBox from './components/ComponentsBox.vue';

const defaultProps = {
  children: 'children',
  label: 'name',
  id: 'id'
}
let possess = reactive({data:[]})

let menuData = reactive({data:[]})

    // 列表数据
    const list = reactive({data:[]})

    // 详情弹窗数据
    const gridData = reactive([]);

    // 分页器参数
    let pageSize = ref(10);
    let currentPage = ref(1);
    let total = ref(0);

    // form表单类============
    let form = ref({})
    // ==============

    let dialogVisible = ref(false);
    let dialogTableVisible = ref(false);
    let putMenuVisible = ref(false)

    // 初始化
    const init = (p) =>{
      api.list({
          ...p,
          page: currentPage.value,
          size: pageSize.value
        }).then(res =>{
            console.log(res)
            list.data = res.data
            total.value = res.total;
        })
    }

    init()

    // 弹窗
    const dialog = (v) => {
        form.value = v;
        dialogVisible.value = true;
    }

    // 查看详情方法
    const detail = (data) =>{
        gridData.length = 0;
        gridData.push(data);
        console.log(gridData)
        dialogTableVisible.value = true;
    }

    // 删除方法
    const del = (id) => {
        ElMessageBox.confirm('请确认删除...', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            api.remove(id).then((res) => {
                ElMessage({
                    message: res.msg,
                    type: 'success'
                })
                init()
            })
        })
    }
    const putMenu = (e) => {
      console.log(e);
      form.value = e
      putMenuVisible.value = true
      getRoleMenuList(e.id).then(res => {
        possess.data=res.data
      }).catch(err =>{
        console.log(err)
      })
      getList().then(res => {
        menuData.data=res.data
      }).catch(err =>{
        console.log(err)
      })
    }

    const query = (v) => {
        init(v)
    }

    const pageChange = (v) => {
        currentPage.value = v;
        init();
    }

    const pageSizeChange = (v) => {
        pageSize.value = v;
        init();
    }

    const menuTree = ref()

    const roleMenuSubmit = () => {
      let checkedNodes = menuTree.value.getCheckedNodes();
      let halfCheckNodes = menuTree.value.getHalfCheckedNodes();
      let ids = [];
      checkedNodes.forEach(e => {
        ids.push(e.id)
      })
      halfCheckNodes.forEach(e => {
        ids.push(e.id)
      })
      // 验证是否修改
      if (ids.toString() == possess.data.toString()){
        return;
      }

      changeRoelMenu({menuIds:ids,roleId:form.value.id}).then(res => {
        ElMessage({
          message: res.msg,
          type: 'success'
        });
        putMenuVisible.value = false
        form.value = {}
      }).catch(err => {
        console.log(err)
      })
      console.log(ids)
    }
</script>
<template>
    <div class="container">
        <div class="head">
            <!-- 查询功能组件 -->
            <ComponentsBox @query="query"></ComponentsBox>
            <div class="bottom">
                <!-- 添加按钮 -->
                <el-button type="primary" @click="dialog">添加</el-button>
            </div>
        </div>
        <div class="middle">
            <!-- 表格 -->
            <el-table :data="list.data" border style="width: 100%">
                <el-table-column fixed type="index" label="Index" width="80"/>
                <el-table-column prop="roleName" label="角色名" min-width="90" width="180" />
                <el-table-column prop="roleCode" label="角色编码" min-width="90" width="180" />
                <el-table-column prop="roleType" label="角色类型"/>
                <el-table-column prop="roleDesc" label="角色描述"/>
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column prop="updateTime" label="修改时间" width="180" />
                <el-table-column fixed="right" label="操作" width="300">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="detail(scope.row)">详情</el-button>
                        <el-button type="warning" size="small" @click="dialog(scope.row)">修改</el-button>
                        <el-button type="warning" size="small" @click="putMenu(scope.row)">菜单权限</el-button>
                        <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <!-- 分页器 -->
            <el-pagination background style="margin-top: 10px; width: 100%;"
            layout="prev, pager, next, jumper, total, sizes"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :current-page="currentPage"
            @current-change="pageChange"
            @size-change="pageSizeChange"
            :total="total"/>
        </div>
        <!-- 编辑弹窗 -->
        <edit-dialog @success="init" :data="form" v-model="dialogVisible" />
        <!-- 详情弹窗 -->
        <el-dialog v-model="dialogTableVisible" title="详情">
            <el-table :data="gridData">
              <el-table-column prop="roleName" label="角色名" min-width="90" width="180" />
              <el-table-column prop="roleCode" label="角色编码" min-width="90" width="180" />
              <el-table-column prop="roleType" label="角色类型"/>
              <el-table-column prop="roleDesc" label="角色描述"/>
              <el-table-column prop="createTime" label="创建时间" width="180" />
              <el-table-column prop="updateTime" label="修改时间" width="180" />
            </el-table>
        </el-dialog>
      <el-dialog v-model="putMenuVisible" title="菜单权限" width="500">
        <el-form :model="form">
          <el-form-item label="角色名">
            <el-input v-model="form.roleName"/>
          </el-form-item>
          菜单列表: <el-tree
            style="max-width: 600px"
            :data="menuData.data"
            :show-checkbox="true"
            node-key="id"
            :props="defaultProps"
            :default-checked-keys="possess.data"
            ref="menuTree"
        />
        </el-form>
        <div style="text-align: right;margin-top: 10px">
          <el-button type="primary" @click="roleMenuSubmit">确认设置</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<style lang="scss" scoped>
    .container{
        height: 100%;
        display: flex;
        flex-direction: column;
        .head{
            margin-bottom: 6px;
        }
        .middle{
            margin-bottom: 12px;
        }
    }
</style>